<template>
  <el-dialog
    :title="lang.t('components.import.title')"
    v-model="show"
    :width="600"
  >
    <slot></slot>
    <el-scrollbar max-height="400px">
      <el-table :data="header" style="width: 100%;">
        <el-table-column :label="lang.t('components.import.table.index')" min-width="50">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="lang.t('components.import.table.name')" >
          <template #default="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="lang.t('components.import.table.value')" >
          <template #default="scope">
            <el-select v-model="scope.row.value" size="small" style="width:200px" multiple clearable>
              <el-option v-for="(item, key) in form" :label="item" :value="key" :key="key"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    
    <div style="margin-top: 30px" v-if="progress.total">
      <el-progress 
        :status="progress.status" 
        :percentage="progress.length / progress.total * 100" 
        :show-text="false" 
      />
      <div style="text-align: center;padding-top: 20px; ">
        <el-link :type="progress.type" href="javascript:;">
          {{  lang.t('components.import.' + progress.type, progress) }}
        </el-link>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="onStart">{{ lang.t('components.import.start') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'
import XLSX from 'xlsx'

export default {
  props: ['form'],
  emits: ['load', 'over'],
  setup(props, { emit }) {
    // 表格
    let table = []

    // 表头
    const header = ref([])

    // 进度
    const progress = ref({
      length: 0,
      total: 0,
      status: '', 
      type: 'primary'
    })

    // 对话框
    const show = ref(false)

    // 加载
    const loading = ref(false)

    // 开始导入
    const onStart = () => {
      // 准备加载
      loading.value = true

      // 加载事件
      emit('load')
    }

    // 打开
    const open = () => {
      // 判断是否正在导入
      if(loading.value) {
        return show.value = true
      }

      // 打开对话框
      const file = app.window.dialogOpen({
        filters: [{ 
          name: 'Excel', 
          extensions: ['xlsx', 'xls', 'csv'] 
        }]
      })

      if(file) {
        // 加载文件 
        const wb = XLSX.readFile(file[0])

        // 导入表格
        table = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header: 1})
        if(!table.length) {
          return app.ui.notify('warning', app.lang.t('components.import.empty'))
        }

        // 弹出表头
        header.value = table.shift().map(item => {
          return {
            name: item,
            value: []
          }
        })

        // 数量清零
        progress.value.total = 0

        // 显示Model
        show.value = true
      }
    }

    // 加载数据
    const load = async(func) => {
      // 处理结果
      let res = false

      // 执行循环
      for (const key in table) {

        // 加载进度
        progress.value = {
          length: parseInt(key) + 1,
          total: table.length,
          status: '',
          type: 'primary'
        }
        
        // 表单数据
        const form = {}
        
        // 根据表头生成表单数据
        header.value.forEach((item, index) => {
          item.value.forEach(name => {
            form[name] = table[key][index]
          })
        })

        // 传入加载方法闭包
        res = await func(form)
        if(!res) break
      }

      progress.value.status = res ? 'success' : 'exception'
      progress.value.type = res ? 'success' : 'danger'
      loading.value = false

      app.ui.notify({
        title: app.lang.t('components.import.title'),
        type: res ? 'success' : 'error', 
        message: app.lang.t('components.import.' + progress.value.type, progress.value),
        duration: 0,
        offset: 100,
      })

      // 完成事件
      emit('over')
    }

    return {
      lang: app.lang,
      progress,
      show,
      loading,
      header,
      onStart,
      open,
      load,
    }
  }
}
</script>